<template>
  <GlobalContainer className="!bg-[#fff]" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`">
    <GlobalHeader title="装修申请" :fixed="true" showBack :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`" />
    <div class="mb-128 rounded-20 bg-white px-40 py-32 pb-safe">
      <div class="header flex items-center">
        <image class="mr-16 size-56" src="../../static/images/jiaofei/head_icon.png" />
        <span>{{ accountStore.roomInfo }}</span>
        <div class="log-btn" @tap="toPageHandle">历史工单</div>
      </div>

      <div class="form-c">
        <div class="form-item">
          <div class="label">申请人</div>
          <div class="form-input">
            <wd-input
              v-model="form.realName"
              custom-class="custom-class"
              custom-input-class="custom-class"
              placeholder="请输入申请人姓名"
              no-border
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">申请人电话</div>
          <div class="form-input">
            <wd-input
              v-model="form.phone"
              placeholder="请输入申请人电话"
              no-border
              custom-class="custom-class"
              custom-input-class="custom-class"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">施工单位</div>
          <div class="form-input">
            <wd-input
              v-model="form.constructionUnit"
              placeholder="请输入施工单位名称"
              no-border
              custom-class="custom-class"
              custom-input-class="custom-class"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">施工负责人电话</div>
          <div class="form-input">
            <wd-input
              v-model="form.leaderPhone"
              placeholder="请输入施工负责人电话"
              type="number"
              :maxlength="11"
              no-border
              custom-class="custom-class"
              custom-input-class="custom-class"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">预计施工开始时间</div>
          <div class="form-input flex items-center !p-0">
            <!-- <div class="left-icon">
              <image src="../../static/images/zhuangxiu/time_icon.png" class="mr-20 size-32" />
            </div> -->
            <div class="flex-1">
              <wd-datetime-picker type="date" v-model="form.constructionStartTime" custom-cell-class="custom-class" />
            </div>
          </div>
        </div>
        <div class="form-item">
          <div class="label">预计施工耗时(天)</div>
          <div class="form-input">
            <wd-input
              v-model="form.constructionDays"
              placeholder="请选择天数"
              no-border
              type="number"
              :maxlength="3"
              custom-class="custom-class"
              custom-input-class="custom-class"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">请上传施工单位资质以及施工区域照片（{{ fileList.length }}/9)</div>
          <div class="upload-content flex flex-wrap gap-32">
            <ImageUpload className="!mt-0" :file-list="fileList" :max="9" :show-length="false" @file-list-change="fileListChange" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">留言</div>
          <div class="text-area">
            <wd-textarea
              v-model="form.content"
              placeholder="给处理人留言"
              :maxlength="100"
              custom-class="custom-class"
              custom-textarea-container-class="custom-class"
              custom-textarea-class="custom-class"
              show-word-limit
            />
          </div>
        </div>
      </div>
    </div>
    <div class="btn-c px-30 py-20 pb-safe">
      <div class="btn" @tap="submit">提交</div>
    </div>
  </GlobalContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ImageUpload from '@/components/imageUpload/index.vue'
import { showToast } from '@/utils'
import { format } from 'date-fns'
import { saveRenovationApplyRecord } from '@/common/api/report'
import { useAccountStore } from '@/store/modules/account'
const OSS_URL = import.meta.env.VITE_OSS_URL

const accountStore = useAccountStore()
const form = ref({
  // 申请人, 申请人电话, 施工单位, 施工负责人电话, 预计施工开始时间, 预计施工耗时(天）, 请上传施工单位资质以及施工区域照片（2/9), 留言
  realName: '', // 申请人姓名
  phone: '', // 申请人电话
  constructionUnit: '', // 施工单位
  leaderPhone: '', // 施工负责人电话
  constructionStartTime: new Date(), // 预计施工开始时间
  constructionDays: '', // 预计施工耗时(天）
  content: '', // 留言
  communityMemberId: '' // 社区成员id
})

const fileList = ref([])
const fileListChange = (list: any) => {
  console.log('[ list ] >', list)
  fileList.value = list
}
const toPageHandle = () => {
  uni.navigateTo({
    url: '/subPages/zhuangxiuLog/index'
  })
}

const submit = () => {
  if (!form.value.realName) {
    showToast('请输入申请人姓名')
    return
  }
  if (!form.value.phone) {
    showToast('请输入申请人电话')
    return
  }
  if (!form.value.constructionUnit) {
    showToast('请输入施工单位名称')
    return
  }
  if (!form.value.leaderPhone) {
    showToast('请输入施工负责人电话')
    return
  }
  if (!form.value.constructionStartTime) {
    showToast('请选择预计施工开始时间')
    return
  }
  if (!form.value.constructionDays) {
    showToast('请输入预计施工耗时(天)')
    return
  }
  // if (!form.value.images) {
  //   showToast('请上传施工单位资质以及施工区域照片')
  //   return
  // }
  const params = {
    ...form.value,
    images: fileList.value.map((item: any) => item).join(','),
    constructionStartTime: format(new Date(form.value.constructionStartTime), 'yyyy-MM-dd HH:mm:ss')
  }
  uni.showLoading({
    title: '提交中...'
  })
  saveRenovationApplyRecord(params)
    .then(res => {
      showToast('提交成功')
      uni.navigateBack()
    })
    .finally(() => {
      uni.hideLoading()
    })
}
</script>

<style scoped lang="scss">
.header {
  font-size: 34rpx;
  color: #303133;
  line-height: 40rpx;
  margin-bottom: 29rpx;
  .log-btn {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 28rpx;
    line-height: 60rpx;
    background: #fafafa;
    border-radius: 40rpx;
    border: 2rpx solid #cdd0d6;
    font-size: 26rpx;
    color: #606266;
    text-align: center;
  }
}

.form-c {
  .form-item {
    margin-bottom: 30rpx;
    .label {
      font-weight: 400;
      font-size: 30rpx;
      line-height: 46rpx;
      color: #303133;
      margin-bottom: 16rpx;
    }
    .form-input {
      background: #f5f7fa;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding: 20rpx 24rpx;
    }
    .upload-item {
      background: #fafafa;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 1px solid #dcdfe6;
    }
  }
  :deep(.custom-class) {
    background: #f5f7fa !important;
    font-size: 30rpx;
    color: #303133;
  }
  :deep(.text-area) {
    background: #f5f7fa;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    border: 1px solid #dcdfe6;
  }
  :deep(.wd-textarea__count) {
    background-color: #f5f7fa;
  }
}

.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  width: 100%;
  z-index: 1;
  background: #fff;
  .btn {
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
